<!--
 * @ModuleName: Api 管理
 * @Author: yuetchn@163.com
 * @LastEditTime: 2023-02-07 13:20:24
-->
<template>
  <div class="app-container">
    <g-table v-model:page-size="searchForm.page_size" v-model:page-number="searchForm.page_number" page :loading="tableLoading" :columns="tableColumns" :total="searchForm.total" :data="tableData" @selection-change="(rows:any)=> tableSelectList = rows" @page-change="init()">
      <el-form inline @submit.stop>
        <el-form-item>
          <el-input v-model.trim="searchForm.keyword" placeholder="请求路径、分组" clearable @keydown.enter="init(true)" @clear="init(true)" />
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="searchForm.query.remark" placeholder="描述" clearable @keydown.enter="init(true)" @clear="init(true)" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.query.methods" collapse-tags clearable multiple placeholder="请选择" @clear="init(true)" @change="init(true)">
            <el-option v-for="item in methodList" :key="item.key" :value="item.key" :label="item.val" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="init(true)">
            <g-svg-icon name="search" />
          </el-button>
          <el-button type="primary" @click="dialogVis = true">
            <g-svg-icon name="add" />
          </el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button :disabled="!tableSelectList.length" type="warning" @click="delSelectApi">
            <g-svg-icon name="delete" />
            &nbsp;
            批量删除
          </el-button>
        </el-form-item>
      </el-form>

      <template #method="{ row }">
        <el-tag :type="methodList.find((f) => f.key === row.method)?.type as any || 'success'">{{ methodList.find((f) => f.key === row.method)?.val || "未知" }}</el-tag>
      </template>

      <template #cz="{ row }">
        <g-link icon="edit" type="primary" right="8" @click="editApi(row.id)">编辑</g-link>
        <g-link icon="delete" type="danger" @click="delApi([row.id])">删除</g-link>
      </template>
    </g-table>

    <!-- 新增 -->
    <g-dialog v-model="dialogVis" title="新增API" @close="dialogClose">
      <el-alert title="新增的api，需要在角色管理模块授权后才能访问" :closable="false" style="margin-bottom: 10px" type="warning" show-icon />
      <el-form ref="apiFormRef" v-loading="apiFormLoading" label-width="100px" :model="apiForm">
        <el-form-item label="路径" prop="path" required>
          <el-input v-model.trim="apiForm.path" clearable />
        </el-form-item>
        <el-form-item label="请求方式" prop="method" required>
          <el-select v-model="apiForm.method" style="width: 100%" clearable placeholder="请选择">
            <el-option v-for="item in methodList" :key="item.key" :value="item.key" :label="item.val" />
          </el-select>
        </el-form-item>
        <el-form-item label="分组" prop="group" required>
          <el-input v-model.trim="apiForm.group" clearable />
        </el-form-item>
        <el-form-item label="简介" prop="remark">
          <el-input v-model.trim="apiForm.remark" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVis = false">取消</el-button>
        <el-button type="primary" :loading="apiFormLoading" @click="submitApiForm">确认</el-button>
      </template>
    </g-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { FormInstance, ElMessageBox } from "element-plus";
import { message } from "ant-design-vue";
import { useSearchForm } from "@/hooks";
import { TableColumns } from "@/types";
import { GetApis, PostApi, PutApi, DeleteApi, GetApi } from "@/api/system/api";

const methodList = [
  {
    key: "GET",
    val: "GET/查询",
    color: "#0CBB52",
    type: "info",
  },
  {
    key: "POST",
    val: "POST/新增",
    color: "#E7A404",
    type: "warning",
  },
  {
    key: "PUT",
    val: "PUT/修改",
    color: "#097BED",
    type: "",
  },
  {
    key: "DELETE",
    val: "DELETE/删除",
    color: "#EB2013",
    type: "danger",
  },
];
const tableSelectList = ref<any[]>([])
const tableColumns: TableColumns[] = [
  {
    label: "selection",
    prop: "selection",
    type: "selection",
    align: "center",
  },
  {
    label: "ID",
    prop: "id",
    width: "70px",
    align: "center",
  },
  {
    label: "请求路径",
    prop: "path",
  },
  {
    label: "分组",
    prop: "group",
  },
  {
    label: "描述",
    prop: "remark",
  },
  {
    label: "请求方式",
    prop: "method",
    slot: true,
    align: "center",
    width: "160px",
  },
  {
    label: "创建时间",
    prop: "create_time",
  },
  {
    label: "更新时间",
    prop: "update_time",
  },
  {
    label: "操作",
    prop: "cz",
    slot: true,
    width: "200px",
    fixed: "right",
    align: "center",
  },
];

const dialogVis = ref(false);
const tableLoading = ref(false);
const tableData = ref<any[]>([]);

const apiFormLoading = ref(false);
const apiFormRef = ref<FormInstance>();
const apiForm = reactive({
  id: 0,
  path: "",
  method: "",
  group: "",
  remark: "",
});
const searchForm = useSearchForm({
  methods: [] as any[],
  remark: "",
});

onMounted(() => {
  init();
});

const init = async (isReset = false) => {
  if (isReset) {
    searchForm.ResetPage();
  }

  try {
    tableLoading.value = true;
    const { data } = await GetApis(searchForm.FormatQuery());
    tableData.value = data.data.list;
    searchForm.total = data.data.total;
  } finally {
    tableLoading.value = false;
  }
};

const dialogClose = () => {
  apiFormRef.value?.resetFields();
  apiForm.id = 0;
};

const editApi = async (id: number) => {
  const { data } = await GetApi(id);
  Object.assign(apiForm, data.data);
  dialogVis.value = true;
};

const delApi = async (ids: number[]) => {
  await ElMessageBox.confirm("确认删除？", "警告");
  const { data } = await DeleteApi(ids);
  message.success(data.msg);
  init();
};

const delSelectApi = async () => {
  await delApi(tableSelectList.value.map(m => m.id))
  tableSelectList.value = []
}

const submitApiForm = async () => {
  try {
    await apiFormRef.value?.validate();
    apiFormLoading.value = true;
    const { data } = apiForm.id ? await PutApi(apiForm) : await PostApi(apiForm);
    message.success(data.msg);
    init();
    dialogVis.value = false;
  } finally {
    apiFormLoading.value = false;
  }
};
</script>
